<template>
  <alert-fade name="fade">
    <div class="menu-alert" >
      <div class="box" >
        <div class="alerttrue" v-if="alertDetails">
          <img :src="AlertDataDetails.imgUrl"/>
          <p>{{AlertDataDetails.name}}</p>
          <span>{{AlertDataDetails.ename}}</span>
          <div>{{AlertDataDetails.introduce}}</div>
        </div>
        <div class="alertfalse" v-else>
          <p>暂无此产品的内容！！！</p>
        </div>
      </div>
      <img class="close" @click="close" src="../../../../assets/images/close.jpg"/>
      <div class="cover"></div>
    </div>

  </alert-fade>
</template>

<script>
import AlertFade from '../../../common/Fade'
export default {
  name: 'AlertDetails',
  components: {
    AlertFade
  },
  data () {
    return {
      alertDetails: false,
      closeAlert: 1
    }
  },
  props: ['AlertDataDetails'],
  watch: {
    AlertDataDetails () {
      this.alertDetails = true
    }
  },
  methods: {
    close () {
      this.$emit('closeAlert', this.closeAlert)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .menu-alert
    position: fixed
    left: 0
    top: 0
    bottom: 96px
    z-index: 101
    width: 100%
    .box
      position absolute
      left 50%
      top 50%
      transform translate(-50%, -70%)
      border: 5px solid #f9d99a
      padding: 30px
      border-radius: 6px
      text-align: center
      z-index 1166
      background #fff
      width 58%
      height 50%
      overflow hidden
      .alerttrue
        img
          width 100%
        p
          font-size 35px
          color #5d5d5d
          font-weight 600
          margin-top 20px
        span
          font-size 24px
          color #bababa
        div
          padding 0 10px
          text-align left
          margin-top 50px
          font-size 27px
          line-height 1.3
          color #8a8a8a
  .close
    position absolute
    bottom: 20%
    left 45%
    z-index 1166
    width 70px
  .cover
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    z-index 1155
    background-color rgba(0, 0, 0, 0.5)
</style>
